<script>
import {watch, ref, reactive} from "vue";

export default {
  name: "App",
  setup(props, context) {
    /*
    watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。
    第一个参数是侦听器的源。这个来源可以是以下几种：
      一个函数，返回一个值
      一个 ref
      一个响应式对象
      ...或是由以上类型的值组成的数组
    第二个参数是在发生变化时要调用的回调函数
      这个回调函数接受三个参数：新值、旧值，以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用，例如等待中的异步请求。
      当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值。
    第三个可选的参数是一个对象，支持以下这些选项：
      immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。
      deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。参考深层侦听器。
      flush：调整回调函数的刷新时机。参考回调的刷新时机及 watchEffect()。
      onTrack / onTrigger：调试侦听器的依赖。参考调试侦听器。
    */
    let count = ref(0)
    let name=ref("陶品奇")
    const person = reactive({
      name: "陶品奇",
      age: 22,
    })
    const changeCount = () => {
      count.value++
    }
    const changePerson = () => {
      person.age++
    }
    // 侦听数据的变化（开启深度侦听和立即侦听）
    watch(count, (newvalue, oldValue) => {
      console.log(newvalue, oldValue)
    }, {deep: true, immediate: true})

    // 侦听数据的变化
    watch(person, (newValue, oldValue) => {
      console.log(newValue, oldValue)
    })

    // 侦听reactive类型数据的变化（拿到原始对象开启深度侦听和立即侦听）
    watch(() => ({...person}), (newValue, oldValue) => {
      console.log(newValue, oldValue)
    }, {deep: true, immediate: true})

    // 侦听多个数据源
    watch([name,count],(newValue,oldValue)=>{
      console.log(newValue,oldValue)
    })
    return {
      count,
      person,
      name,
      changeCount,
      changePerson
    }
  }
}
</script>
<template>
  <div id="app">
    <h1 @click="changeCount">{{ count }}</h1>
    <h1 @click="changePerson">{{ person }}</h1>
  </div>
</template>

<style lang="less"></style>
